<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Send, Users, Smile } from 'lucide-vue-next'

// 定义消息和用户接口
interface Message {
  id: number
  content: string
  author: string
  timestamp: string
  isOwn: boolean
}

interface User {
  id: number
  name: string
  status: 'online' | 'away' | 'offline'
  avatar?: string
}

// 响应式数据
const messages = ref<Message[]>([
  {
    id: 1,
    content: "欢迎来到聊天室！大家可以在这里自由交流。",
    author: "系统管理员",
    timestamp: "14:30",
    isOwn: false
  },
  {
    id: 2,
    content: "大家好！很高兴加入这个论坛。",
    author: "新用户小明",
    timestamp: "14:32",
    isOwn: false
  },
  {
    id: 3,
    content: "欢迎新朋友！有什么问题可以随时提问。",
    author: "热心网友",
    timestamp: "14:33",
    isOwn: false
  },
  {
    id: 4,
    content: "谢谢大家！我想了解一下这个论坛的主要功能。",
    author: "我",
    timestamp: "14:35",
    isOwn: true
  }
])

const onlineUsers = ref<User[]>([
  { id: 1, name: "系统管理员", status: "online" },
  { id: 2, name: "新用户小明", status: "online" },
  { id: 3, name: "热心网友", status: "online" },
  { id: 4, name: "开发者小K", status: "away" },
  { id: 5, name: "设计师小李", status: "online" },
  { id: 6, name: "我", status: "online" }
])

const newMessage = ref('')
const messagesContainer = ref<HTMLElement>()
const showUserList = ref(true)

// 发送消息
const sendMessage = () => {
  if (newMessage.value.trim()) {
    const message: Message = {
      id: messages.value.length + 1,
      content: newMessage.value.trim(),
      author: "我",
      timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
      isOwn: true
    }
    messages.value.push(message)
    newMessage.value = ''
    
    // 滚动到底部
    nextTick(() => {
      scrollToBottom()
    })
    
    // 模拟其他用户回复
    setTimeout(() => {
      const replies = [
        "收到！",
        "好的，明白了。",
        "赞同你的观点！",
        "有道理。",
        "👍"
      ]
      const randomReply = replies[Math.floor(Math.random() * replies.length)]
      const replyMessage: Message = {
        id: messages.value.length + 1,
        content: randomReply,
        author: onlineUsers.value[Math.floor(Math.random() * (onlineUsers.value.length - 1))].name,
        timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        isOwn: false
      }
      messages.value.push(replyMessage)
      nextTick(() => {
        scrollToBottom()
      })
    }, 1000 + Math.random() * 2000)
  }
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 处理回车发送
const handleKeyPress = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

// 获取用户头像字母
const getAvatarText = (name: string) => {
  return name.charAt(0).toUpperCase()
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case 'online': return 'bg-green-500'
    case 'away': return 'bg-yellow-500'
    case 'offline': return 'bg-gray-400'
    default: return 'bg-gray-400'
  }
}

// 组件挂载后滚动到底部
onMounted(() => {
  nextTick(() => {
    scrollToBottom()
  })
})
</script>

<template>
  <div class="page">
    <!-- 头部 -->
    <header class="header">
      <SidebarTrigger />
      <h1>聊天室</h1>
      <div class="header-actions">
        <div class="online-badge">
          <Users class="w-4 h-4" />
          {{ onlineUsers.length }} 在线
        </div>
      </div>
    </header>

    <div class="chat-container">
      <!-- 消息区域 -->
      <div class="messages-section with-user-list">
        <div class="messages-scroll" ref="messagesContainer">
           <div class="messages-list">
             <div 
               v-for="message in messages" 
               :key="message.id" 
               :class="['message', { 'message-own': message.isOwn }]"
             >
               <div class="message-avatar">
                 {{ getAvatarText(message.author) }}
               </div>
               <div class="message-content">
                 <div class="message-header">
                   <span class="message-author">{{ message.author }}</span>
                 </div>
                 <div class="message-body">
                   <div class="message-text">{{ message.content }}</div>
                 </div>
               </div>
             </div>
           </div>
         </div>
      </div>

      <!-- 用户列表 -->
      <div class="users-section">
        <div class="users-header">
           <h3>在线用户</h3>
           <span class="user-count-badge">{{ onlineUsers.length }}</span>
         </div>
         <div class="users-list">
           <div class="user-item" v-for="user in onlineUsers" :key="user.id">
             <div class="user-avatar">
               {{ getAvatarText(user.name) }}
             </div>
             <div class="user-info">
               <span class="user-name">{{ user.name }}</span>
               <div class="user-status">
                 <div :class="['status-dot', getStatusColor(user.status)]"></div>
                 <span class="status-text">{{ user.status === 'online' ? '在线' : user.status === 'away' ? '离开' : '离线' }}</span>
               </div>
             </div>
           </div>
         </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-section with-user-list">
      <div class="input-container">
        <Input
          v-model="newMessage"
          placeholder="输入消息..."
          @keypress="handleKeyPress"
          class="message-input"
        />
        <Button @click="sendMessage" :disabled="!newMessage.trim()" class="send-button">
          <Send class="w-4 h-4" />
        </Button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.dark .page {
  background-color: #1e2022;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  background: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
}

.header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--sidebar-foreground));
  flex: 1;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-list-toggle {
  gap: 0.5rem;
}

.online-badge {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.user-count-badge {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.chat-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.messages-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  overflow: hidden;
  transition: margin-right 0.3s ease;
}

.messages-section.with-user-list {
  margin-right: 280px;
}

.messages-scroll {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 70%;
  margin-bottom: 0.5rem;
}

.message-own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: hsl(var(--secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--secondary-foreground));
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.message-content {
  display: inline-block;
  max-width: 100%;
}

.message-header {
  margin-bottom: 0.25rem;
}

.message-author {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  display: block;
}

.message-own .message-author {
  color: hsl(var(--muted-foreground));
  text-align: right;
}

.message-body {
  background: #fafafa;
  color: #333;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
  max-width: 100%;
}

.message-own .message-body {
  background: #fafafa;
  color: #333;
}

.dark .message-body {
  background: #c4c1b5;
  color: #333;
}

.dark .message-own .message-body {
  background: #c4c1b5;
  color: #333;
}

.message-text {
  line-height: 1.5;
  word-wrap: break-word;
}

.input-section {
  padding: 1rem 1.5rem;
  background: hsl(var(--sidebar-background));
  border-top: 1px solid hsl(var(--sidebar-border));
  transition: margin-right 0.3s ease;
}

.input-section.with-user-list {
  margin-right: 265px;
}

.input-container {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.message-input {
  flex: 1;
  min-height: 2.5rem;
  resize: none;
}

.send-button {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  flex-shrink: 0;
}

.users-section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: hsl(var(--sidebar-background));
  border-left: 1px solid hsl(var(--sidebar-border));
  display: flex;
  flex-direction: column;
}

.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
}

.users-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--sidebar-foreground));
}

.users-list {
  flex: 1;
  padding: 0.5rem;
  overflow-y: auto;

}

.user-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.user-item:hover {
  background: hsl(var(--muted));
}

.user-avatar {
  width: 2.25rem;
  height: 2.25rem;
  background: hsl(var(--secondary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--secondary-foreground));
  flex-shrink: 0;
}

.user-info {
  flex: 1;
}

.user-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.status-text {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    padding: 0.75rem 1rem;
  }
  
  .header-left h1 {
    font-size: 1.125rem;
  }
  
  .users-section {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 10;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
  }
  
  .message {
    max-width: 85%;
  }
  
  .input-section {
    padding: 0.75rem 1rem;
  }
}
</style>